<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>5</title>
		<style>
			body {
				margin: 0;
				padding: 0;
			}
			
			/* 设置 body 高度为 100%，也需要设置 html 高度为 100%。body 的高度百分比是相对于 html 高度的百分比的，html 为根元素。*/	
			html,
			body {
				height: 100%;
			}
			

			.js-height {
				width: 30%;
				float: left;
				margin-right: 4px;
				background: green;
			}
		</style>
	</head>
	<body>
		<div class="js-height" data-height="-200px"></div>
		<div class="js-height" data-height="100px"></div>
		<div class="js-height" data-height="59%"></div>

		<script>
			// 根据 data-height 设置 js-height 类的高度
			function setHeight() {
				// 遍历所有的 .js-height
				Array.from(document.querySelectorAll('.js-height')).forEach(function (v) {
					if (v.dataset.height == null) {
						return;
					}
					
					// 计算后的高度
					var height = 0;
					
					if (v.dataset.height.endsWith('%')) {
						// 如果是百分比
						
						height = window.innerHeight * parseFloat(v.dataset.height) / 100;
							
					} else if (v.dataset.height.endsWith('px')){
						// 如果是像素
						
						// 像素值
						var pxHeight = parseInt(v.dataset.height, 10);
						
						if (pxHeight >= 0) {
							height = pxHeight;
						} else if (pxHeight < 0) {
							height = window.innerHeight + pxHeight;
						}
					}
					
					// 设置高度
					v.style.height = height + "px";
				});
			}
			addEventListener('load', setHeight);
			addEventListener('resize', setHeight);
		</script>
	</body>
</html>